<html>
    <head>
        <style>
            body {
              max-width: 600px;
              margin: 50px auto;
              font-family: Arial;
              font-size: 15px;
              line-height: 1.5em;
            }
            .tip {
              font-size: .8em;
            }
        </style>
    </head>
    <body>
        <h1>Kitchen Sink</h1>

        <p>Kitchen Sink is an application that shows the functionality of all the plugins.
            The Kitchen Sink UI is not beautiful nor is the application alone very useful.
            The ambition of the Kitchen Sink is to provide a reference implementation 
            that combines all the plugins so that the reader can see how to use them.</p>

        <h2>How to use the application</h2>

        <h3>Stencil</h3>
        <p>Try to drag elements from the stencil on the left and drop them into the paper.
        Stencil also checks whether an element was dropped outside the paper area and does not
        put such an element into the graph.</p>

        <h3>SelectionView</h3>
        <p>Put some elements into the paper. Press the mouse cursor somewhere in a blank area of the paper
            while holding the Shift key and move the selection rectangle so that it covers your elements.
            You should see the elements being selected. If you move one of the selected elements, all others
            move too. You can also select and deselect individual elements by clicking them
            while holding the Ctrl key.
        </p>
        <p class="tip">TIP: Open the JavaScript console in your browser and evaluate <code>selection.pluck('id')</code>.
            You should see the IDs of all the selected elements.</p>

        <h3>PaperScroller</h3>
        <p>Press a mouse cursor somewhere in the blank area of the paper and move it. You should see the paper being panned.
            There are also scrollbars on the right and bottom part of the paper which you can use to scroll the <q>small</q>
            view of the <q>big</q> paper.
        </p>

        <h3>Halo</h3>
        <p>Click any element in the paper to bring up a Halo. Halo is a set of tools to manipulate the element.
            The default tools are:</p>
        <ul>
            <li>Remove - (top-left) - click to remove the element.</li>
            <li>Clone - (top-middle) - drag the clone icon tool to create a clone of the element.</li>
            <li>Fork - (top-right) - drag the fork icon tool to create a clone of the element and link between these two in one go.</li>
            <li>Link - (middle-right) - drag the link icon tool to create a link. This link can either be dropped in an empty paper 
                area or over another element in which case a connection between those two element is made.</li>
            <li>Resize - (bottom-right) - drag the resize icon tool to resize the element.</li>
            <li>Rotate - (bottom-left) - drag the rotate icon tool to rotate the element.</li>
            <li>Unlink - (middle-left) - click the unlink icon tool to drop all the inbound and outbound links coming in/out of the element.
                Note that this icon tool is hidden if the element does not have any associated links.</li>
        </ul>

        <h3>Clipboard</h3>
        <p>Select elements and press Ctrl-c followed by Ctrl-v. You should see a copy of the selected elements
            pasted into the paper. All the links between the selected elements are pasted too.
            The newly pasted elements have a little offset (so that they are visually
            recognizable from the original elements) and are immediately selected
            for quick manipulation. Try to refresh the page
            and press again Ctrl-v. You should see elements pasted into the paper. This is because the Clipboard supports the HTML 5 localStorage facility.
        </p>

        <h3>CommandManager</h3>
        <p>Make some actions in the paper and press the <em>undo</em>/<em>redo</em> buttons. You should be able to browse through
            the history of actions.
        </p>

        <h3>Validator</h3>
        <p>Put an element into the paper. Then try to put another element over the first one. You
            should see the action being immediately reverted and a red message shown in the top-right corner
            of the paper. This is a demonstration of the Validator plugin, which is useful for defining
            certain rules for actions that the user is allowed to perform.
        </p>

        <h3>SVG Export</h3>
        <p>Have some elements in the paper and press the <em>open as SVG</em> button. You should see a
            new browser window/tab popped up with an SVG content in it. This is the SVG of your paper. Of course,
            opening a new window with SVG is not very useful but this plugin provides another, more important,
            method <code>toSVG()</code> that returns an SVG string representation of the paper.
        </p>
        <p class="tip">TIP: Open the JavaScript console in your browser and press the <em>open as SVG</em> button.
            You should see the SVG string printed to the console. This is the result of the <code>toSVG()</code> method.</p>

        <h3>ForceDirected layout</h3>
        <p>Put some elements into the paper and connect them together. Then press the <em>layout</em> button. You should
            see your graph being auto-layouted below the stencil area. This is probably a strange usage of the 
            ForceDirected layout plugin which is more suitable for bigger graphs and their spacial analysis. However, 
            this is again just a demonstration of the ForceDirected layout plugin.
        </p>

        <p><em>Have fun with the Kitchen Sink!</em></p>

        <p class="tip">Copyright (c) 2013 client IO</p>

    </body>
</html>
